home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 February / PCWFEB09.iso / Software / Resources / Chat & Communication / PeerAware 1.03 / PeerAware-Setup.exe / Html / scripts / toolbar.js < prev    next >
Encoding:
JavaScript  |  2008-09-07  |  25.8 KB  |  829 lines
  1. /* ***** BEGIN LICENSE BLOCK *****
  2.  
  3. This code has been relicensed under LGPL as permitted by original license.
  4.  
  5. Copyright Cumulate Draw Editor
  6.  
  7. This library is free software; you can redistribute it and/or
  8. modify it under the terms of the GNU Lesser General Public
  9. License as published by the Free Software Foundation; either
  10. version 2.1 of the License, or (at your option) any later version.
  11.  
  12. This library is distributed in the hope that it will be useful,
  13. but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  15. Lesser General Public License for more details.
  16.  
  17. You should have received a copy of the GNU Lesser General Public
  18. License along with this library; if not, write to the Free Software
  19. Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA 
  20.  * ***** END LICENSE BLOCK ***** */
  21.  
  22. function setPageSize2()
  23. {
  24.     if (document.documentElement.clientWidth-320>0)
  25.         $("_surround").style.width=document.documentElement.clientWidth-320;
  26.     refreshColorIndicators();
  27.     var t=0;
  28.     if (document.documentElement.clientHeight-238-$('_toolbar').clientHeight>0)
  29.     {
  30.         var t=document.documentElement.clientHeight-238 - $('Selectpalette').clientHeight - $('_toolbar').clientHeight;
  31.         if (t<0)
  32.             t=100;
  33.         $("palette").style.height=t;
  34.     }
  35.     try
  36.     {
  37.         if (document.documentElement.clientHeight-281-$('_toolbar').clientHeight>0)
  38.             $("_surround").style.height=document.documentElement.clientHeight-281-$('_toolbar').clientHeight;
  39.     }
  40.     catch (E)
  41.     {
  42.     }
  43. }
  44.  
  45. /***operations related to toolbar and shape palette**/
  46. var c;
  47. var currentColorMode="__textColor";
  48. var saveBox;
  49. var uploadBox;
  50. var previousPaletteID="basic"
  51.  
  52. /**
  53. * new:reset the current canvas
  54. **/
  55. function createNew(){
  56.     //var input_box=confirm("Would you like to save your current work before starting a new drawing?\nClick Cancel to procced without saving");
  57.     //if(input_box==false){
  58.         c.reset();
  59.     //}
  60. }
  61.  
  62. /**
  63. *begin upload (open) by displaying the upload (open) box
  64. */
  65. function upload(){
  66.     if (typeof(window.external)!="undefined" && typeof(window.external.saveFile)!="undefined")
  67.     {
  68.         loadData(window.external.loadFile());
  69.     }
  70. }
  71.  /**
  72.   *display the 'save as' dialog box
  73.   **/
  74.   function startSave(){
  75. /*    Try.these(c.renderer.savePolyLinePaths());
  76.     dummy=c.getRealData();
  77.     transmit(aName, 'w', "loa " + dummy);*/
  78.  
  79.     var format=c.renderer.EXTENSION;
  80.     var dummy=getAllData(format);
  81.     if (typeof(window.external)!="undefined" && typeof(window.external.saveFile)!="undefined")
  82.         window.external.saveFile(dummy.innerHTML);
  83. }
  84.  
  85.  
  86.   /**
  87.   *remove the selection box, connection trackers,
  88.   * set zoom back to 1.0,getPageSize, fix polyline paths (for IE), and remove text area,
  89.   * remove Page, set the zoom factor and size in the data
  90.   **/
  91.   function getAllData(format){
  92.     
  93.     //now unselect so that the tracker does not travel along!
  94.     c.unselect();
  95.     var activeLineTracker=$('richdraw').ownerDocument.getElementById("active-shape-tracker");
  96.     if(activeLineTracker){
  97.         c.renderer.remove(activeLineTracker);
  98.     }
  99.     //get the zoom
  100.     var zoom=c.getZoom();
  101.     //add the zoom factor
  102.     var dummy=null;
  103.     //TODO this needs to be refactored!!! move down to editor
  104.     //lets reset the zoom real quick to get the 1.0 zoom level for save
  105.     if(c.renderer.TYPE!="SVG"){
  106.         c.setZoom((1.0/zoom));
  107.         //save the polyline paths 
  108.         Try.these(c.renderer.savePolyLinePaths());
  109.         dummy=c.getRealData();
  110.     }
  111.     else{
  112.         dummy=c.getRealData();
  113.         var value=(zoom*(1.0/zoom)).toFixed(2);
  114.         c.setShapeZoom(dummy,1.0,zoom);
  115.         
  116.     }
  117.     
  118.     if(c.renderer.TYPE!="SVG"){
  119.         c.setZoom(zoom);
  120.     }
  121.     //End this needs to be refactored
  122.     //remove text area
  123.     var text=dummy.getElementsByTagName("TEXTAREA")[0];
  124.     c.renderer.remove(text);
  125.     //remove page
  126.     var page=dummy.getElementsByTagName("div")[0];
  127.     c.renderer.remove(page);
  128.     
  129.     
  130.     //add the zoom factor
  131.     var zoomElement=c.renderer.createElement("zoom-factor");
  132.     zoomElement.setAttribute("factor",zoom);
  133.     c.appendPageAttribute(dummy,zoomElement);;
  134.     // add size
  135.     var size=c.getPageSize();
  136.     var pageSize=c.renderer.createElement("page-size");
  137.     pageSize.setAttribute("width",size.width);
  138.     pageSize.setAttribute("height",size.height);
  139.     c.appendPageAttribute(dummy,pageSize);
  140.     
  141.     return dummy;
  142.   
  143.   }
  144.   /**
  145.   *build the color picker,
  146.   *called only once from onload and then cached. 
  147.   *Notice the select colour method assigned as listener for this color palette
  148.   **/    
  149.   function buildPicker()
  150.             {
  151.                 var Colours = Array('#FFFFFF', '#EDEDED', '#E4E4E4', '#DADADA', '#D1D1D1', '#C7C7C7', '#BDBDBD', '#B3B3B3', '#A8A8A8', '#9E9E9E', '#FF0010', '#FFFE38', '#76FF36', '#00FFFF', '#002CFD',    '#EF00FD', '#FB0034', '#FFF125', '#00AE5F', '#00B8EF', '#00429A', '#F30094', '#939393', '#878787', '#7B7B7B', '#6E6E6E', '#626262', '#535353', '#444444', '#343434', '#202020', '#000000', '#FF9C86', '#FFB18D', '#FFC997', '#FFF7A4', '#D8E2A6', '#B5D8A6', '#91CFA6', '#78D3CD', '#08D6F7', '#63AFDA', '#709DCE', '#7D8CC2', '#9D90C2', '#F8A1C6', '#FE9EA5', '#FF715C', '#FF9363', '#FFB26A', '#FFF478', '#C3D680', '#96C981', '#55BF84', '#00C3BB', '#00C7F3', '#0097CE', '#0080BC', '#416AAD', '#7E6BAF','#A66EAF', '#F475AF', '#FB7388', '#FB0034', '#FF6A35', '#FF9936', '#FFF125', '#ADCB52', '#62BC5B', '#00AE5F', '#00B2A6', '#00B8EF', '#0080C1', '#0063AB', '#00429A', '#593C99', '#923397', '#F30094', '#F90066', '#AD001F', '#B34A20', '#B76B21', '#C4A621', '#748F3B', '#408641', '#007E46', '#008076', '#0083AB', '#005A89', '#00437B', '#00256E', '#421E6C', '#68006B', '#A90068', '#AC0047', '#8A0000', '#8D3A00', '#905400', '#998402', '#58712A', '#2E6B31', '#006535', '#00665E', '#006988', '#00456D','#003162', '#000258', '#2F0056', '#540054', '#870052', '#8A0035', '#D3B7A1', '#A88E80', '#816E64', '#625550', '#463D3B', '#D6A279', '#B8855E', '#9E6D49', '#875735', '#744524');
  152.                 var Obj = document.getElementById("cpicker");
  153.                 for (var i = 0; i < Colours.length; i++) {
  154.                 
  155.                     var dDiv = document.createElement("div");
  156.                     dDiv.style.background = Colours[i];
  157.                     dDiv.style.width = "10px";
  158.                     dDiv.style.height = "10px";
  159.                     dDiv.onclick = selectColour;
  160.                     Obj.appendChild(dDiv);
  161.                 }
  162.             }
  163.  
  164.     /**
  165.     *this method is called after the user selects a text/fill/line color
  166.     **/
  167.     function selectColour()
  168.     {
  169.         $('cpicker').style.visibility='hidden';
  170.         if(currentColorMode=="__textColor"){
  171.             var Obj = document.getElementById("__textColorIndicator");
  172.         
  173.             Obj.style.background  = this.style.backgroundColor;
  174.             setFontColor(this.style.backgroundColor);
  175.         }
  176.         else if(currentColorMode=="__fillColor"){
  177.             var Obj = document.getElementById("fillColorIndicator");
  178.         
  179.             Obj.style.background  = this.style.backgroundColor;
  180.             setFillColor(this.style.backgroundColor);
  181.             $('linewidth').style.visibility="visible";
  182.         }
  183.  
  184.         else if(currentColorMode=="__lineColor"){
  185.             var Obj = document.getElementById("lineColorIndicator");
  186.             Obj.style.background  = this.style.backgroundColor;
  187.             setLineColor(this.style.backgroundColor);
  188.             $('opacity').style.visibility="visible";
  189.         }
  190.         //now call the real function
  191.     }
  192.  /**
  193.  * update the page size based on input from the shape properties box
  194.  **/
  195.  function updatePageSize(){
  196.      var width=$("_pageWidth").value;
  197.      var height=$("_pageHeight").value;
  198.      c.setPageSize(width,height);
  199.     var transmitData = "pgs " + width + " " + height;
  200.     gApplication.transmit('w', transmitData);
  201.  
  202.  }
  203.   /**
  204.   *initializes the editor and renderers
  205.   **/
  206.   function demo() {
  207.     var renderer;
  208.     ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
  209.     opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  210.     if ((!ie) || (opera)) {
  211.       renderer = new SVGRenderer();
  212.     }
  213.     else {
  214.       renderer = new VMLRenderer();
  215.       //$('_surround').style.width="100%";
  216.       //$('_surround').style.height="95%";
  217.       //$('palette').style.width="100%";
  218.       //$('palette').style.height="91%";
  219.     }
  220.     c = new RichDrawEditor(document.getElementById('richdraw'), renderer);
  221.     c.onselect = onSelect;
  222.     c.onunselect = onUnselect;
  223.     
  224.     c.editCommand('fillcolor', 'white');
  225.     c.editCommand('linecolor', 'black');
  226.     c.editCommand('linewidth', '1px');
  227.     setZoom(0.8);
  228.     c.setMode('select');
  229.     buildPicker();
  230.     refreshColorIndicators();
  231.     loadRefreshData();
  232.     c.updateShapeInfo();
  233.     loadPalette('flow-chart');
  234.     loadPalette('network');
  235.     loadPalette('macui');
  236.     loadPalette('windowsui');
  237.     loadPalette('workflow');
  238.     loadPalette('basic');
  239.     show("startdrawing");
  240.     c.initializationDone();
  241.   }
  242.  
  243.   function refreshColorIndicators() {
  244.      $('fillColorIndicator').style.backgroundColor = 'white';
  245.      var imageOffset=Position.cumulativeOffset($('__fillColor'));
  246.      $('fillColorIndicator').style.left=imageOffset[0]+25;
  247.      $('fillColorIndicator').style.top=imageOffset[1]-5;
  248.      $('lineColorIndicator').style.backgroundColor = 'black';
  249.      imageOffset=Position.cumulativeOffset($('__lineColor'));
  250.       $('lineColorIndicator').style.left=imageOffset[0]+25;
  251.      $('lineColorIndicator').style.top=imageOffset[1]-5;
  252.     imageOffset=Position.cumulativeOffset($('__textColor'));
  253.       $('__textColorIndicator').style.left=imageOffset[0]+25;
  254.      $('__textColorIndicator').style.top=imageOffset[1];
  255.      $('__textColorIndicator').style.backgroundColor='black';
  256.   }
  257.   /**
  258.   * we save the data on the server in case a user hits refresh or leave the page,
  259.   * this data can be restored as long as the server session stays alive (10 minutes). this method
  260.   * goes to the server to check for any data stored in the session
  261.   **/
  262.   function loadRefreshData(){
  263.     
  264.     var url = 'ImageProcessor';
  265.     
  266.     var pars="REQUEST_TYPE=PAGE_LOAD";
  267.     var myAjax = new Ajax.Request(
  268.             url, 
  269.             {
  270.                 method: 'post',
  271.                 parameters: pars,
  272.                 onComplete: loadRefreshComplete
  273.             });
  274. }
  275. /**
  276. *called after refresh complete to redisplay the data
  277. **/
  278. function loadRefreshComplete(originalRequest){
  279.     var responseText=originalRequest.responseText;
  280.         
  281.         if(responseText){
  282.             var response=responseText;
  283.             var div=c.getValidDocumentFromResponse(response)
  284.             c.open(div);
  285.             
  286.         }
  287. }
  288.   
  289.   /**
  290.   *store the data in user session if user is leaving the page or hits refresh, this
  291.   *way we can redisplay if she comes back or after refresh
  292.   **/
  293.   function storeData(){
  294.       var url = 'ImageProcessor';
  295.     var dummy=getAllData(c.renderer.EXTENSION);
  296.     var data=(dummy.innerHTML)?dummy.innerHTML:dummy.xml;
  297.     var pars = 'DATA='+encodeURIComponent(data)+"&REQUEST_TYPE=PAGE_UNLOAD";
  298.     var myAjax = new Ajax.Request(
  299.             url, 
  300.             {
  301.                 method: 'post', 
  302.                 parameters: pars
  303.             });
  304.   }
  305.   /**
  306.   * a wrapper on setMode which will set the help text
  307.   **/
  308.   function setShapeMode(mode,status){
  309.     if(mode=='line'||mode=='ortho-line'||mode=='curve-line'){
  310.        setHelp("<font color='red'>Connector Mode:</font>To Draw the connector, move your mouse over to the drawing area, click and drag");
  311.     }
  312.     else if(mode=='text'){
  313.       setHelp("<font color='red'>Text Mode:</font>To Draw the Text shape, move your mouse over to the drawing area, click and drag");
  314.         
  315.     }
  316.     else if(mode=='select'){
  317.       setHelp("<font color='red'>Select Mode</font>");
  318.     }
  319.     else{
  320.       setHelp("To Draw this shape, move your mouse over to the drawing area, click and drag");
  321.       //c.renderer.loadShape(mode,null);
  322.     }
  323.     setMode(mode,status);
  324.   
  325.   }
  326.   
  327.   /**
  328.   * set zoom function
  329.   **/
  330.   function setZoom(zoomfactor){
  331.       
  332.     c.editCommand('zoom',zoomfactor);
  333.      $('_zoomValue').innerHTML=(c.getZoom()*100).toFixed(0)+"%";
  334.   }
  335.   /**
  336.   * essentially calls an edit function on the editor
  337.   **/
  338.   function setMode(mode, status) {
  339.     c.editCommand('mode', mode);
  340.     if(mode=='line'){
  341.         $(mode).style.backgroundColor = '#f8b75d'
  342.         $('ortho-line').style.backgroundColor="#f8f8f8";
  343.         $('curve-line').style.backgroundColor="#f8f8f8";
  344.         $('text').style.backgroundColor="#f8f8f8";
  345.         return;
  346.         
  347.     }
  348.     else if(mode=='ortho-line'){
  349.         $(mode).style.backgroundColor = '#f8b75d'
  350.         $('line').style.backgroundColor="#f8f8f8";
  351.         $('curve-line').style.backgroundColor="#f8f8f8";
  352.         $('text').style.backgroundColor="#f8f8f8";
  353.         return;
  354.         
  355.     }
  356.     else if(mode=='text'){
  357.         $(mode).style.backgroundColor = '#f8b75d'
  358.         $('line').style.backgroundColor="#f8f8f8";
  359.         $('ortho-line').style.backgroundColor="#f8f8f8";
  360.         $('curve-line').style.backgroundColor="#f8f8f8";
  361.         return;
  362.         
  363.     }
  364.     else if(mode=='curve-line'){
  365.         $(mode).style.backgroundColor = '#f8b75d'
  366.         $('line').style.backgroundColor="#f8f8f8";
  367.         $('ortho-line').style.backgroundColor="#f8f8f8";
  368.         $('text').style.backgroundColor="#f8f8f8";
  369.         
  370.         return;
  371.         
  372.     }
  373.     else if(mode=='select'){
  374.         $('line').style.backgroundColor="#f8f8f8";
  375.         $('ortho-line').style.backgroundColor="#f8f8f8";
  376.         $('text').style.backgroundColor="#f8f8f8";
  377.         $('curve-line').style.backgroundColor="#f8f8f8";
  378.         return;
  379.     }
  380.     else {
  381.         $('line').style.backgroundColor="#f8f8f8";
  382.         $('ortho-line').style.backgroundColor="#f8f8f8";
  383.         $('text').style.backgroundColor="#f8f8f8";
  384.         var imgs = $('palette').getElementsByTagName('img');
  385.         for (var i=0; i<imgs.length; i++) {
  386.             imgs[i].style.backgroundColor = '';
  387.         }
  388.         $(mode).style.backgroundColor = '#bbbbbb';
  389.     }
  390.   }
  391.   /**
  392.   *display or hide the grid background
  393.   **/
  394.   function setGrid(grid){
  395.      var gridValue = grid.options[grid.selectedIndex].value;
  396.      var page=$('_page');
  397.      if(gridValue=='Grid'){
  398.         $('_page').style.backgroundImage="url(images/grid.jpg)";
  399.         gApplication.transmit('w', 'cmd grid on');
  400.     }
  401.     else{
  402.         $('_page').style.backgroundImage="";
  403.         gApplication.transmit('w', 'cmd grid off');
  404.     }
  405.     
  406.     
  407.   }
  408.   /**
  409.   * delete the shape
  410.   **/
  411.   function deleteShape() {
  412.     if (c.selected)
  413.         gApplication.transmit('w', 'cmd deleteSelection ' + c.selected.id);
  414.    setHelp("You can also use the delete key on the keyboard");
  415.     c.deleteSelection();
  416.   }
  417.  
  418.   /**
  419.   * cut, copy, paste operations
  420.   **/
  421.   
  422.   function cutShape(){
  423.     if (c.selected)
  424.         gApplication.transmit('w', 'cmd deleteSelection ' + c.selected.id);
  425.     setHelp("To cut, you can also use <b>CTRL+X</b>");
  426.     c.cut();
  427.   }
  428.   
  429.  
  430.   function copyShape(){
  431.     setHelp("To copy, you can also use <b>CTRL+C</b>");
  432.     c.copy();
  433.   }
  434.   
  435.  
  436.   function pasteShape(){
  437.     setHelp("To paste, you can also use <b>CTRL+V</b>");
  438.     var t=c.paste();
  439.     var transmitData = c.renderer.copy(t);
  440.     if (transmitData != null)
  441.         gApplication.transmit('w', "cpy " + transmitData);
  442.     
  443.   }
  444.   
  445.   /*****************************begin color,fill,gradient,opacity,shadow related operations*************/
  446.   function setFillColor(color) {
  447.     
  448.     c.editCommand('fillcolor', color);
  449.   }
  450.   
  451.   
  452.   function setLineColor(color) {
  453.  
  454.     c.editCommand('linecolor', color);
  455.    
  456.   }
  457.   
  458.   function setLineWidth(widths) {
  459.     var width = widths.options[widths.selectedIndex].value;
  460.     c.editCommand('linewidth', width);
  461.   }
  462.   /**
  463.    * please note this is different than setLineStyle methods which will set the arrow types
  464.    */
  465.   function setLineDashStyle(style) {
  466.     var style = style.options[style.selectedIndex].value;
  467.     c.editCommand('linedashstyle', style);
  468.   }
  469.   function setOpacity(opacity) {
  470.     var opacityValue = opacity.options[opacity.selectedIndex].value;
  471.     c.editCommand('opacity',opacityValue);
  472.   }
  473.   
  474.   function setShadow(shadow) {
  475.     var shadowValue = shadow.options[shadow.selectedIndex].value;
  476.     c.editCommand('shadow',shadowValue);
  477.   }
  478.   
  479.   function setGradient(gradient) {
  480.   
  481.     var gradientValue= gradient.options[gradient.selectedIndex].value;
  482.     c.editCommand('gradient',gradientValue);
  483.   }
  484.   /*****************************end color,fill,gradient,opacity,shadow related operations***/
  485.   
  486.   /*******************************begin font related functions************************/
  487.   function setFontFamily(fontFamily){
  488.     var fontFamilyValue=fontFamily.options[fontFamily.selectedIndex].value;
  489.     c.editCommand('fontFamily',fontFamilyValue);
  490.   
  491.   }
  492.   function setFontSize(fontSize){
  493.     var fontSizeValue=fontSize.options[fontSize.selectedIndex].value;
  494.     c.editCommand('fontSize',fontSizeValue);
  495.   
  496.   }
  497.    
  498.   function setFontColor(color) {
  499.   
  500.     c.editCommand('fontColor', color);
  501.   }
  502.   
  503.   
  504.   function flipBold(){
  505.     
  506.     c.editCommand('bold',null);
  507.     var bold=$('__bold');
  508.     if(bold.name=='on'){
  509.         bold.name='off';
  510.         bold.style.background="#f8f8f8";
  511.     }
  512.     else{
  513.         bold.name='on';
  514.         bold.style.background="#f8b75d";
  515.     }
  516.   
  517.   }
  518.   function flipItalics(){
  519.     c.editCommand('italic',null);
  520.     var italics=$('__italics');
  521.     if(italics.name=='on'){
  522.         italics.name='off';
  523.         italics.style.background="#f8f8f8";
  524.     }
  525.     else{
  526.         italics.name='on';
  527.         italics.style.background="#f8b75d";
  528.     }
  529.   }
  530.   function setAlign(align){
  531.     
  532.     c.editCommand('align',align);
  533.      var alignLeft=$('__alignLeft');
  534.      if(align=="left"){
  535.         alignLeft.style.background="#f8b75d";
  536.      }
  537.      else{
  538.         alignLeft.style.background="#f8f8f8";
  539.      }
  540.      var alignCenter=$('__alignCenter');
  541.      if(align=='center'){
  542.         alignCenter.style.background="#f8b75d";
  543.      }
  544.      else{
  545.         alignCenter.style.background="#f8f8f8";
  546.      }
  547.      var alignRight=$('__alignRight');
  548.      if(align=='right'){
  549.         alignRight.style.background="#f8b75d";
  550.      }
  551.      else{
  552.         alignRight.style.background="#f8f8f8";
  553.      }
  554.   }
  555.   /***************************end font related functions******************************/
  556.   /***************************z-index functions**************************************/
  557.   function sendToBack(){
  558.     if (c.selected)
  559.         gApplication.transmit('w', 'cmd sendtoback ' + c.selected.id);
  560.     c.sendToBack();
  561.   }
  562.   function bringToFront(){
  563.     if (c.selected)
  564.         gApplication.transmit('w', 'cmd bringtofront ' + c.selected.id);
  565.     c.bringToFront();
  566.   }
  567.  
  568. function setUser(aUser){
  569. c.setUser(aUser);
  570. }
  571.  
  572. function handleRemoteCommand(remoteData){
  573. c.handleRemoteCommand(remoteData);
  574. }
  575.  
  576.  
  577.   function getOptionByValue(selected, value)
  578.   {
  579.    if(!selected)return;
  580.     for (var i=0; i<selected.length; i++) {
  581.       if (selected.options[i].value == value) {
  582.         return i;
  583.       }
  584.     }
  585.     return -1;
  586.   }
  587.   
  588.   /**
  589.   * show the color palette for text/fill/line
  590.   **/
  591.   function showColorPalette(img){
  592.     var cpicker=$('cpicker');
  593.     var imageOffset=Position.cumulativeOffset(img);
  594.     cpicker.style.visibility="visible";
  595.     cpicker.style.position="absolute";
  596.     cpicker.style.overflow="visible";
  597.     cpicker.style.left=imageOffset[0];
  598.     cpicker.style.top=imageOffset[1];
  599.     
  600.     cpicker.style.zIndex=100;
  601.     currentColorMode=img.id;
  602.     if(img.id=="__fillColor"){
  603.         $('linewidth').style.visibility="hidden";
  604.         $('fillColorIndicator').style.left=imageOffset[0]+25;
  605.         $('fillColorIndicator').style.top=imageOffset[1]-5;
  606.     }
  607.     else{
  608.         $('linewidth').style.visibility="visible";
  609.     }
  610.     if(img.id=="__lineColor"){
  611.         $('opacity').style.visibility="hidden";
  612.         $('lineColorIndicator').style.left=imageOffset[0]+25;
  613.         $('lineColorIndicator').style.top=imageOffset[1]-5;
  614.     }
  615.     else{
  616.         $('opacity').style.visibility="visible";
  617.     }
  618.     if(img.id=='__textColor'){
  619.         $('__textColorIndicator').style.left=imageOffset[0]+25;
  620.         $('__textColorIndicator').style.top=imageOffset[1];
  621.     }
  622.     
  623.   }
  624.   
  625.   
  626.   
  627.  
  628.  /**
  629.  * called when a shape is selected
  630.  * this function can be optimized by setting global vars which refer to these variable
  631.  * this way we don't have to do an xml lookup every time!!! In addition it may be good
  632.  * idea to return all the attributes in one object rather than return on att at a time
  633.  */
  634.   function onSelect() {
  635.     $('fillColorIndicator').style.backgroundColor = c.queryCommand('fillcolor');
  636.     $('lineColorIndicator').style.backgroundColor = c.queryCommand('linecolor');
  637.     $('linewidth').selectedIndex = getOptionByValue($('linewidth'), c.queryCommand('linewidth'));
  638.     $('opacity').selectedIndex = getOptionByValue($('opacity'), c.queryCommand('opacity'));
  639.     $('gradient').selectedIndex = getOptionByValue($('gradient'), c.queryCommand('gradient'));
  640.     $('__shadow').selectedIndex = getOptionByValue($('__shadow'), c.queryCommand('shadow'));
  641.     $('__linestyle').selectedIndex = getOptionByValue($('__linestyle'), c.queryCommand('linestyle'));
  642.     $('__lineDashStyle').selectedIndex = getOptionByValue($('__lineDashStyle'), c.queryCommand('linedashstyle'));
  643.     
  644.     var font=c.queryCommand('font');
  645.     $('__fontfamily').selectedIndex=getOptionByValue($('__fontfamily'), font.family);
  646.     $('__fontsize').selectedIndex=getOptionByValue($('__fontsize'), font.size);
  647.     $('__textColorIndicator').style.background=font.color;
  648.     var bold=$('__bold');
  649.     var italic=$('__italics');
  650.      if(font.bold=='bold'){
  651.         bold.style.background="#f8b75d";
  652.         //bold.style.borderColor="#f8f8f8";
  653.         bold.name='on';
  654.      }
  655.      else{
  656.        bold.style.background="#f8f8f8";
  657.        bold.name='off';
  658.      }
  659.  
  660.       if(font.italics=='italic'){
  661.         italic.style.background="#f8b75d";
  662.         //italic.style.borderColor="#f8f8f8";
  663.         italic.name='on';
  664.      }
  665.      else{
  666.        italic.style.background="#f8f8f8";
  667.        italic.name='off';
  668.      }
  669.      //debugger;
  670.      var alignLeft=$('__alignLeft');
  671.      if(font.align=="left"){
  672.         alignLeft.style.background="#f8b75d";
  673.         //alignLeft.style.borderColor="#f8f8f8";
  674.      }
  675.      else{
  676.         alignLeft.style.background="#f8f8f8";
  677.         //alignLeft.style.borderColor="#f8f8f8";
  678.      }
  679.      var alignCenter=$('__alignCenter');
  680.      if(font.align=='center'){
  681.         alignCenter.style.background="#f8b75d";
  682.         //alignLeft.style.borderColor="#f8f8f8";
  683.      }
  684.      else{
  685.         alignCenter.style.background="#f8f8f8";
  686.         //alignLeft.style.borderColor="#f8f8f8";
  687.      }
  688.      var alignRight=$('__alignRight');
  689.      if(font.align=='right'){
  690.         alignRight.style.background="#f8b75d";
  691.         //alignLeft.style.borderColor="#f8f8f8";
  692.      }
  693.      else{
  694.         alignRight.style.background="#f8f8f8";
  695.         //alignLeft.style.borderColor="#f8f8f8";
  696.      }
  697.     
  698.   }
  699.  /**
  700.  * called when a shape is unselected
  701.  * this function can be optimized by setting global vars which refer to these variable
  702.  * this way we don't have to do an xml lookup every time!!! In addition it may be good
  703.  * idea to return all the attributes in one object rather than return on att at a time
  704.  */
  705.   function onUnselect() {
  706.    $('fillColorIndicator').style.backgroundColor = c.queryCommand('fillcolor');
  707.     $('lineColorIndicator').style.backgroundColor = c.queryCommand('linecolor');
  708.     $('linewidth').selectedIndex = getOptionByValue($('linewidth'), c.queryCommand('linewidth'));
  709.     $('opacity').selectedIndex = getOptionByValue($('opacity'), c.queryCommand('opacity'));
  710.     $('gradient').selectedIndex = getOptionByValue($('gradient'), c.queryCommand('gradient'));
  711.     $('__shadow').selectedIndex = getOptionByValue($('__shadow'), c.queryCommand('shadow'));
  712.     $('__linestyle').selectedIndex = getOptionByValue($('__linestyle'), c.queryCommand('linestyle'));
  713.     var font=c.queryCommand('font');
  714.     $('__fontfamily').selectedIndex=getOptionByValue($('__fontfamily'), font.family);
  715.     $('__fontsize').selectedIndex=getOptionByValue($('__fontsize'), font.size);
  716.     $('__lineDashStyle').selectedIndex = getOptionByValue($('__lineDashStyle'), c.queryCommand('linedashstyle'));
  717.      $('__textColorIndicator').style.background=font.color;
  718.      var bold=$('__bold');
  719.      var italic=$('__italics');
  720.      if(font.bold=='bold'){
  721.         bold.style.background="#f8b75d";
  722.         bold.style.borderColor="#f8f8f8";
  723.         bold.name='on';
  724.      }
  725.      else{
  726.        bold.style.background="#f8f8f8";
  727.        bold.name='off';
  728.      }
  729.  
  730.       if(font.italics=='italic'){
  731.         italic.style.background="#f8b75d";
  732.         italic.style.borderColor="#f8f8f8";
  733.         italic.name='on';
  734.      }
  735.      else{
  736.        italic.style.background="#f8f8f8";
  737.        italic.name='off';
  738.      }
  739.      var alignLeft=$('__alignLeft');
  740.      if(font.align=="left"){
  741.         alignLeft.style.background="#f8b75d";
  742.         //alignLeft.style.borderColor="#f8f8f8";
  743.      }
  744.      else{
  745.         alignLeft.style.background="#f8f8f8";
  746.         //alignLeft.style.borderColor="#f8f8f8";
  747.      }
  748.      var alignCenter=$('__alignCenter');
  749.      if(font.align=='center'){
  750.         alignCenter.style.background="#f8b75d";
  751.         //alignLeft.style.borderColor="#f8f8f8";
  752.      }
  753.      else{
  754.         alignCenter.style.background="#f8f8f8";
  755.         //alignLeft.style.borderColor="#f8f8f8";
  756.      }
  757.      var alignRight=$('__alignRight');
  758.      if(font.align=='right'){
  759.         alignRight.style.background="#f8b75d";
  760.         //alignLeft.style.borderColor="#f8f8f8";
  761.      }
  762.      else{
  763.         alignRight.style.background="#f8f8f8";
  764.         //alignLeft.style.borderColor="#f8f8f8";
  765.      }
  766.   }
  767.   /** 
  768.   *set line style
  769.   **/
  770.   function setLineStyle(style){
  771.      var lineStyle = style.options[style.selectedIndex].value;
  772.     c.editCommand('linestyle',lineStyle);
  773.   }
  774.   /**
  775.   * a global function to set help string
  776.   * @param {string} help string
  777.   **/
  778.   function setHelp(helpString){
  779.       $('help').innerHTML=helpString;
  780.   }
  781.   /**
  782.   * Load a palette if its not already loaded
  783.   * @param {string}id of the containing div
  784.   **/
  785.   function loadPalette(id){
  786.     hide(previousPaletteID);
  787.     show(id);
  788.       if(!$(id))return;
  789.       var div=$(id);
  790.       var children=div.getElementsByTagName("div");
  791.       if(children.length==0){
  792.        var palette=c.loadPalette(id);
  793.        div.innerHTML=palette.xml;
  794.        previousPaletteID=id;
  795.       }
  796.   }
  797.  
  798.   function updateShapeProperties() {
  799.       var width=$("_width").value;
  800.       var height=$("_height").value;
  801.       var x=$("_x").value;
  802.       var y=$("_y").value;
  803.       var rotation=$("_rotation").value;
  804.       c.updateShape(width,height,x,y,rotation);
  805.     var transmitData = "mvs " + c.selected.id + " " + width + " " + height + " " + x + " " + y + " " + rotation;
  806.     gApplication.transmit('w', transmitData);
  807. };
  808. /**
  809. * a utility method to make sure only numbers are entered in the shape properties and page properties
  810. * @credit: Cambia Research:
  811. * @credit:http://www.cambiaresearch.com/cambia3/snippets/javascript/browser/allownumbersonly.aspx
  812. **/
  813.  function isNumberKey(evt)
  814.       {
  815.          var charCode = (evt.which) ? evt.which : event.keyCode
  816.          if (charCode > 31 && (charCode < 48 || charCode > 57))
  817.             return false;
  818.  
  819.          return true;
  820.  
  821.       }
  822. /**
  823.  * open the quick help window
  824.  */
  825.  function openHelpWindow()
  826. {
  827. }
  828.  
  829.